<template>
<div class='swiper_main'>
  <swiper class='swiper-wrapper'
          :paginationClickable='true'
          :slidesPerView= "5"
          :spaceBetween='50'
          :breakpoints="breakPoints"
          :pagination="customPagination"
          :modules="modules"
  >
    <swiper-slide class='swiper-slide' v-for="(item, index) in credibleList" :key='index'>
      <div class='list'>
        <img :src='item.icon' :alt='item.title' class='icon'>
        <span class='title'>{{item.title}}</span>
        <p class='detail'>{{item.detail}}</p>
      </div>
    </swiper-slide>
    <div class="swiper-pagination"></div>
  </swiper>
</div>
</template>

<script setup lang='ts'>
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Autoplay, Navigation, Pagination, A11y,EffectCoverflow} from 'swiper';
import type SwiperClass from 'swiper'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-coverflow'
const modules = [Autoplay, Pagination, Navigation, A11y];
const breakPoints ={
  1024: {
    slidesPerView: 4,
    spaceBetween: 20
  },
  768: {
    slidesPerView: 3,
    spaceBetween: 20
  },
  640: {
    slidesPerView: 2,
    spaceBetween: 20
  },
  320: {
    slidesPerView: 1,
    spaceBetween: 10
  }
}
const credibleList =[
  {
    icon:'../../../public/img/icon1@2x.png',
    title:'资金安全',
    detail:'人民银行第三方监管平台账户资金严格按规则进出，在货物流转未完成的情况下任何一方包括平台都不得私下挪用货款，资金100%安全。'
  },
  {
    icon:'../../../public/img/icon2@2x.png',
    title:'生意好做',
    detail:'背靠云商会合作，顾客多一点云商会已经与超过16000家商协会和409万家会员企业建立合作关系。'
  },
  {
    icon:'../../../public/img/icon3@2x.png',
    title:'交易保障',
    detail:'完备体系公正维护各方权益11年二奢积累的完备保障制度，300+团队护航7x24在线客服支持。'
  },
  {
    icon:'../../../public/img/icon4@2x.png',
    title:'不压货款',
    detail:'不压保证金.资金回笼不用愁我们深知回笼资金的重要性压货款猛于虎我们为商家提供极速打款服务，保证金也随时可退24小时极速到账。'
  },
  // {
  //   icon:'../../../public/img/icon4.png',
  //   title:'不压货款',
  //   detail:'不压保证金.资金回笼不用愁我们深知回笼资金的重要性压货款猛于虎我们为商家提供极速打款服务，保证金也随时可退24小时极速到账。'
  // },
  // {
  //   icon:'../../../public/img/icon4.png',
  //   title:'不压货款',
  //   detail:'不压保证金.资金回笼不用愁我们深知回笼资金的重要性压货款猛于虎我们为商家提供极速打款服务，保证金也随时可退24小时极速到账。'
  // },
  // {
  //   icon:'../../../public/img/icon4.png',
  //   title:'不压货款',
  //   detail:'不压保证金.资金回笼不用愁我们深知回笼资金的重要性压货款猛于虎我们为商家提供极速打款服务，保证金也随时可退24小时极速到账。'
  // },
  // {
  //   icon:'../../../public/img/icon4.png',
  //   title:'不压货款',
  //   detail:'不压保证金.资金回笼不用愁我们深知回笼资金的重要性压货款猛于虎我们为商家提供极速打款服务，保证金也随时可退24小时极速到账。'
  // }
]
const customPagination = {
  clickable: true,
  // renderBullet: bulletRenderer,
  // type: 'custom',
  // renderCustom: function (swiper, current, total) {
  //   console.log(swiper,current,total)
  //   return current + ' of ' + total;
  // }
}
</script>

<style scoped lang='scss'>
.swiper_main {
  width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  .swiper-wrapper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    .list{
      height: 324px;
      width: 285px;
      border: 1px solid #000000;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #FFFFFF;
      justify-content: center;
      overflow: hidden;
      box-sizing: border-box;
      img.icon{
        width: 40px;
        height: 40px;
      }
      span.title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #000000;
        line-height: 33px;
        text-shadow: 0px 2px 30px rgba(0, 0, 0, 0.1);
        text-align: left;
        font-style: normal;
        padding-top: 19px;
        padding-bottom: 26px;
      }
      p.detail {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #919191;
        line-height: 20px;
        text-shadow: 0px 2px 30px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-style: normal;
        padding-left: 32px;
        padding-right: 33px;
      }
    }

  }
}
::v-deep .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  border-radius: inherit;
  width: 20%;
  height: 2px;
  margin: 0px !important;
  position: relative;
  &::after{
    content: "";
    width: 2px;
    height: 9px;
    display: block;
    position: absolute;
    right: -2px;
    background-color: #fff;
    top: -3px;

  }
  &::before{
    content: "";
    width: 2px;
    height: 9px;
    display: block;
    position: absolute;
    left: -1;
    background-color: #fff;
    top: -3px;

  }
  &:first-child:before{
    display: none;
  }
  &:last-child:after{
    display: none;
  }
}
::v-deep .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgb(255, 29, 29) !important;
}

</style>
